<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码仓库搜索引擎</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f4efea;
            color: #383838;
            line-height: 1.6;
            position: relative;
            overflow-x: hidden;
        }
        .highlight {
            background-color: transparent;
            color: #ff6b35;
            font-weight: 600;
        }
        .search-input:focus {
            outline: none;
            border-color: #383838;
        }
        .page-btn:hover:not(:disabled) {
            background-color: #4a9eff;
            color: white;
            border-color: #4a9eff;
        }
        .page-btn.active {
            background-color: #4a9eff;
            color: white;
            border-color: #4a9eff;
        }
        .page-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Decorative Elements */
        .decorative-cloud {
            position: absolute;
            opacity: 0.25;
            z-index: 0;
            pointer-events: none;
        }
        
        .decorative-diamond {
            position: absolute;
            opacity: 0.2;
            z-index: 0;
            pointer-events: none;
        }
        
        .decorative-cylinder {
            position: absolute;
            opacity: 0.22;
            z-index: 0;
            pointer-events: none;
        }
        
        .decorative-docs {
            position: absolute;
            opacity: 0.2;
            z-index: 0;
            pointer-events: none;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) translateX(0);
            }
            50% {
                transform: translateY(-20px) translateX(10px);
            }
        }
        
        @keyframes floatSlow {
            0%, 100% {
                transform: translateY(0) translateX(0) rotate(0deg);
            }
            50% {
                transform: translateY(-15px) translateX(8px) rotate(5deg);
            }
        }
        
        @keyframes floatReverse {
            0%, 100% {
                transform: translateY(0) translateX(0) rotate(0deg);
            }
            50% {
                transform: translateY(15px) translateX(-8px) rotate(-5deg);
            }
        }
        
        .float-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        .float-slow {
            animation: floatSlow 8s ease-in-out infinite;
        }
        
        .float-reverse {
            animation: floatReverse 7s ease-in-out infinite;
        }
        
        .main-content {
            position: relative;
            z-index: 1;
        }
        
        /* Search box focus effect */
        .search-box:focus-within {
            border-color: #383838;
        }
        
        /* Author link styles */
        .author-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #383838;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .author-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ff6b35;
            transition: width 0.3s ease;
        }
        
        .author-link:hover {
            color: #ff6b35;
        }
        
        .author-link:hover::after {
            width: 100%;
        }
        
        .author-link i {
            transition: transform 0.2s ease;
        }
        
        .author-link:hover i {
            transform: translate(2px, -2px);
        }
        
        /* Logo link styles - same as author link */
        .logo-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #383838;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .logo-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ff6b35;
            transition: width 0.3s ease;
        }
        
        .logo-link:hover {
            color: #383838;
        }
        
        .logo-link:hover::after {
            width: 100%;
        }
        
        .logo-link span {
            transition: color 0.2s;
        }
        
        .logo-link:hover span {
            color: #ff6b35;
        }
        
        .logo-link i {
            transition: color 0.2s;
        }
        
        .logo-link:hover i {
            color: #ff6b35;
        }o
        
        /* Search button hover effect - MotherDuck style */
        .search-btn::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 12px;
            background-color: #383838;
            border-radius: 8px;
            opacity: 0;
            transform: translateY(0);
            transition: all 0.3s ease;
            z-index: -1;
        }
        
        .search-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 100%;
            width: 12px;
            height: 100%;
            background-color: #383838;
            border-radius: 8px;
            opacity: 0;
            transform: translateX(0);
            transition: all 0.3s ease;
            z-index: -1;
        }
        
        .search-btn:hover {
            background-color: #6fc2ff;
            color: #383838;
            border: 1.77778px solid #383838;
            padding: 16.5px 22px;
            transform: translateY(-2px);
        }
        
        .search-btn:hover::after {
            opacity: 1;
            transform: translateY(12px);
        }
        
        .search-btn:hover::before {
            opacity: 1;
            transform: translateX(12px);
        }
        
        /* Results section */
        .results-section {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px;
        }
        
        /* Results grid - same as index.html */
        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }
        
        /* Repo card styles - same as index.html */
        .repo-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(56, 56, 56, 0.1);
            transition: all 0.2s;
            cursor: pointer;
            animation: fadeInUp 0.7s ease-out;
        }
        
        .repo-card:hover {
            border-color: #383838;
            transform: translateY(-2px);
        }
        
        .repo-cover {
            width: 100%;
            height: 200px;
            background-color: #4a9eff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
            position: relative;
            overflow: hidden;
        }
        
        .repo-cover-placeholder {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #4a9eff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
        }
        
        .repo-content {
            padding: 20px;
        }
        
        .repo-header {
            margin-bottom: 12px;
        }
        
        .repo-name {
            font-size: 18px;
            font-weight: 600;
            color: #383838;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: -0.01em;
        }
        
        .repo-name a {
            color: #383838;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .repo-name a:hover {
            color: #ff6b35;
        }
        
        .repo-full-name {
            font-size: 14px;
            color: rgba(56, 56, 56, 0.6);
            margin-bottom: 8px;
            font-weight: 400;
        }
        
        .repo-description {
            font-size: 14px;
            color: #383838;
            line-height: 1.5;
            margin-bottom: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-weight: 400;
        }
        
        .repo-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        
        .repo-stat {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            color: #383838;
            font-weight: 400;
        }
        
        .repo-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .repo-tag {
            background: rgba(56, 56, 56, 0.05);
            color: #383838;
            padding: 4px 12px;
            border-radius: 2px;
            font-size: 12px;
            font-weight: 500;
            border: 1px solid rgba(56, 56, 56, 0.1);
        }
        
        .repo-tag.language {
            background: rgba(74, 158, 255, 0.1);
            color: #4a9eff;
            border-color: rgba(74, 158, 255, 0.2);
        }
        
        .repo-actions {
            display: flex;
            gap: 8px;
        }
        
        .btn-view {
            flex: 1;
            background-color: #4a9eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .btn-view:hover {
            background-color: #3a8eeb;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
        }
        
        .btn-favorite {
            background: white;
            color: #383838;
            border: 1px solid rgba(56, 56, 56, 0.1);
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-favorite:hover {
            background: rgba(255, 107, 53, 0.1);
            border-color: #ff6b35;
            color: #ff6b35;
        }
        
        /* Featured repos section */
        .featured-section {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px;
        }
        
        .featured-title {
            font-size: 24px;
            font-weight: 600;
            color: #383838;
            margin-bottom: 24px;
            letter-spacing: -0.01em;
        }
        
        @media (max-width: 768px) {
            .decorative-cloud,
            .decorative-diamond,
            .decorative-cylinder,
            .decorative-docs {
                display: none;
            }
            
            .search-section {
                padding: 40px 20px !important;
            }
            
            .search-title {
                font-size: 40px !important;
            }
            
            .results-section {
                padding: 20px !important;
            }
            
            nav {
                padding: 12px 20px !important;
            }
            
            .author-link {
                font-size: 12px !important;
            }
            
            .author-link i {
                width: 12px !important;
                height: 12px !important;
            }
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Navigation Bar -->
    <nav class="bg-[#f4efea] border-b border-[#383838]/10 px-10 py-5 flex justify-between items-center" style="position: sticky; top: 0; z-index: 100;">
        <a href="/" class="logo-link flex items-center gap-2 no-underline">
            <div class="w-8 h-8 bg-[#f4efea] rounded-sm flex items-center justify-center">
                <i data-lucide="search" class="w-5 h-5 text-[#383838]"></i>
            </div>
            <span class="text-xl font-semibold text-[#383838]" style="letter-spacing: -0.02em;">代码仓库搜索引擎</span>
        </a>
        <div class="flex items-center gap-4">
            <a 
                href="https://gitee.com/Cary_C" 
                target="_blank" 
                rel="noopener noreferrer"
                class="author-link flex items-center gap-2 text-[#383838] hover:text-[#ff6b35] transition-colors duration-200"
                style="font-size: 14px; font-weight: 500; text-decoration: none; letter-spacing: 0.32px; padding: 4px 0;"
            >
                <span>Jul1en</span>
                <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
            </a>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="relative">
        <!-- Decorative Elements -->
        <!-- Cloud 1 -->
        <div class="decorative-cloud float-animation" style="top: 150px; left: 5%; width: 120px; height: 80px;">
            <svg viewBox="0 0 200 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30 50C30 40 40 30 50 30C55 30 60 32 62 35C68 25 78 20 90 20C105 20 115 30 115 40C120 40 125 42 127 45C132 38 140 35 150 35C160 35 168 40 172 45C175 42 180 40 185 40C195 40 202 47 202 55C202 60 199 65 195 68C198 70 200 73 200 76C200 81 196 85 190 85H30C25 85 20 80 20 75C20 70 25 65 30 65C28 65 25 62 25 58C25 54 28 50 30 50Z" fill="#383838" stroke="#383838" stroke-width="2"/>
            </svg>
        </div>
        
        <!-- Cloud 2 -->
        <div class="decorative-cloud float-slow" style="top: 200px; right: 8%; width: 100px; height: 65px;">
            <svg viewBox="0 0 200 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30 50C30 40 40 30 50 30C55 30 60 32 62 35C68 25 78 20 90 20C105 20 115 30 115 40C120 40 125 42 127 45C132 38 140 35 150 35C160 35 168 40 172 45C175 42 180 40 185 40C195 40 202 47 202 55C202 60 199 65 195 68C198 70 200 73 200 76C200 81 196 85 190 85H30C25 85 20 80 20 75C20 70 25 65 30 65C28 65 25 62 25 58C25 54 28 50 30 50Z" fill="#383838" stroke="#383838" stroke-width="2"/>
            </svg>
        </div>
        
        <!-- Diamond -->
        <div class="decorative-diamond float-reverse" style="top: 450px; left: 3%; width: 80px; height: 80px;">
            <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M50 10L90 50L50 90L10 50L50 10Z" fill="#4a9eff" stroke="#383838" stroke-width="2" stroke-linejoin="round"/>
            </svg>
        </div>
        
        <!-- Cylinder -->
        <div class="decorative-cylinder float-animation" style="top: 250px; right: 3%; width: 60px; height: 90px;">
            <svg viewBox="0 0 100 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="50" cy="20" rx="40" ry="8" fill="#4a9eff" stroke="#383838" stroke-width="2"/>
                <path d="M10 20 L10 130" stroke="#383838" stroke-width="2"/>
                <path d="M90 20 L90 130" stroke="#383838" stroke-width="2"/>
                <ellipse cx="50" cy="130" rx="40" ry="8" fill="#4a9eff" stroke="#383838" stroke-width="2"/>
                <rect x="10" y="20" width="80" height="110" fill="#4a9eff" opacity="0.3"/>
            </svg>
        </div>
        
        <!-- Stacked Documents -->
        <div class="decorative-docs float-slow" style="bottom: 100px; right: 10%; width: 70px; height: 90px;">
            <svg viewBox="0 0 100 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- Bottom document -->
                <rect x="15" y="30" width="70" height="90" fill="#383838" opacity="0.2" stroke="#383838" stroke-width="2" rx="2"/>
                <!-- Top document -->
                <rect x="5" y="10" width="70" height="90" fill="#4a9eff" stroke="#383838" stroke-width="2" rx="2"/>
                <!-- Folded corner -->
                <path d="M65 10 L75 10 L75 20 L65 10 Z" fill="#383838" stroke="#383838" stroke-width="2"/>
            </svg>
        </div>
        
        <!-- Search Section -->
        <div class="mb-12 relative z-10" style="padding: 80px 40px; text-align: center;">
            <div class="max-w-2xl mx-auto">
                <h1 class="text-[#383838] mb-6" style="font-size: 56px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;">发现优质开源代码仓库</h1>
                <div class="flex gap-3 bg-white rounded-lg p-1 border border-[#383838]/10 transition-all duration-200 search-box" style="border-radius: 12px; margin-top: 40px;">
                    <input 
                        type="text" 
                        id="searchInput"
                        placeholder="搜索仓库名称、描述、技术栈..." 
                        class="flex-1 border-none outline-none px-5 py-4 text-base bg-transparent text-[#383838] placeholder-[#383838]/50 search-input"
                        style="font-size: 16px; padding: 16px 20px;"
                    />
                    <button 
                        id="searchBtn"
                        class="bg-[#4a9eff] text-white border-none px-8 py-4 rounded-lg text-base font-medium uppercase cursor-pointer transition-all duration-300 relative search-btn"
                        style="border-radius: 8px; font-family: 'Courier New', monospace; padding: 16px 32px; font-size: 16px; font-weight: 500; border: none;"
                    >
                        搜索
                    </button>
                </div>
            </div>
        </div>

        <!-- Results Section -->
        <section class="results-section relative z-10" id="resultsSection">
            <!-- Results Info -->
            <div id="resultsInfo" class="flex justify-between items-center mb-6 hidden" style="margin-bottom: 24px;">
                <div class="text-sm text-[#383838]" style="font-size: 14px; font-weight: 400;">
                    找到 <strong id="totalCount">0</strong> 个相关仓库
                </div>
            </div>

            <!-- Loading State -->
            <div id="loading" class="hidden text-center py-12">
                <div class="inline-block border-3 border-[#383838]/10 border-t-[#4a9eff] rounded-full w-10 h-10 animate-spin mb-5" style="border: 3px solid rgba(56, 56, 56, 0.1); border-top: 3px solid #4a9eff; border-radius: 50%; width: 40px; height: 40px; margin: 0 auto 20px;"></div>
                <p class="text-[#383838]/60" style="color: rgba(56, 56, 56, 0.6);">搜索中...</p>
            </div>

            <!-- Results Container -->
            <div id="resultsContainer" class="results-grid"></div>
            
            <!-- Featured Repos (shown on initial page) -->
            <div id="featuredSection" class="featured-section">
                <h2 class="featured-title">推荐仓库</h2>
                <div class="results-grid" id="featuredGrid">
                    <!-- Featured repos will be inserted here -->
                </div>
            </div>

            <!-- Pagination -->
            <div id="pagination" class="flex justify-center items-center gap-2 mt-12 hidden" style="margin-top: 40px; gap: 8px;"></div>

            <!-- Empty State -->
            <div id="emptyState" class="hidden text-center py-20 bg-white rounded-lg border border-[#383838]/10" style="padding: 80px 20px; background: white; border-radius: 12px; border: 1px solid rgba(56, 56, 56, 0.1);">
                <div class="text-6xl mb-5 opacity-30 text-[#383838]" style="font-size: 64px; margin-bottom: 20px; opacity: 0.3; color: #383838;">🔍</div>
                <p class="text-[#383838]/60 text-base" style="font-size: 16px; color: rgba(56, 56, 56, 0.6); font-weight: 400;">暂无搜索结果</p>
                <p class="text-[#383838]/40 text-sm mt-2" style="color: rgba(56, 56, 56, 0.4); font-size: 14px; margin-top: 8px;">尝试使用不同的关键词搜索</p>
            </div>
        </section>
    </main>

    <script>
        // Initialize Lucide icons
        lucide.createIcons();

        const API_BASE = 'http://localhost/search';
        let currentPage = 1;
        const itemsPerPage = 10;
        let allResults = [];
        let searchQuery = '';

        // Search function
        async function performSearch(query) {
            if (!query.trim()) return;
            
            searchQuery = query.trim();
            currentPage = 1;
            
            // Hide featured section
            document.getElementById('featuredSection').classList.add('hidden');
            
            // Show loading
            document.getElementById('loading').classList.remove('hidden');
            document.getElementById('resultsContainer').innerHTML = '';
            document.getElementById('pagination').classList.add('hidden');
            document.getElementById('emptyState').classList.add('hidden');
            document.getElementById('resultsInfo').classList.add('hidden');

            try {
                const response = await fetch(`${API_BASE}?query=${encodeURIComponent(query)}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    mode: 'cors'
                });
                
                if (!response.ok) {
                    const errorText = await response.text();
                    throw new Error(`搜索失败: ${response.status} ${response.statusText} - ${errorText}`);
                }
                
                const data = await response.json();
                allResults = Array.isArray(data) ? data : [];
                
                document.getElementById('loading').classList.add('hidden');
                
                if (allResults.length === 0) {
                    document.getElementById('emptyState').classList.remove('hidden');
                    return;
                }

                // Show results info
                document.getElementById('totalCount').textContent = allResults.length;
                document.getElementById('resultsInfo').classList.remove('hidden');
                
                displayResults();
                displayPagination();
                
            } catch (error) {
                console.error('Search error:', error);
                document.getElementById('loading').classList.add('hidden');
                document.getElementById('emptyState').classList.remove('hidden');
                
                // Show error message to user
                const emptyState = document.getElementById('emptyState');
                emptyState.innerHTML = `
                    <div class="text-6xl mb-5 opacity-30 text-[#ff6b35]" style="font-size: 64px; margin-bottom: 20px; opacity: 0.3; color: #ff6b35;">⚠️</div>
                    <p class="text-[#ff6b35] text-base font-semibold" style="font-size: 16px; font-weight: 600; color: #ff6b35;">搜索出错</p>
                    <p class="text-[#383838]/60 text-sm mt-2" style="color: rgba(56, 56, 56, 0.6); font-size: 14px; margin-top: 8px;">${error.message}</p>
                    <p class="text-[#383838]/40 text-xs mt-4" style="color: rgba(56, 56, 56, 0.4); font-size: 12px; margin-top: 16px;">请检查后端服务是否正常运行</p>
                `;
            }
        }

        // Tokenization for Chinese and English
        function tokenize(text) {
            if (!text) return [];
            
            const words = [];
            // Extract Chinese characters (each character or consecutive characters)
            const chineseRegex = /[\u4e00-\u9fa5]+/g;
            // Extract English words
            const englishRegex = /[a-zA-Z]+/g;
            
            let match;
            // Extract Chinese words
            while ((match = chineseRegex.exec(text)) !== null) {
                const chineseWord = match[0];
                // Add the whole word
                words.push(chineseWord);
                // Also add individual characters for better matching
                if (chineseWord.length > 1) {
                    for (let i = 0; i < chineseWord.length; i++) {
                        words.push(chineseWord[i]);
                    }
                }
            }
            
            // Extract English words
            while ((match = englishRegex.exec(text)) !== null) {
                const word = match[0].toLowerCase();
                if (word.length > 1) {
                    words.push(word);
                }
            }
            
            // Remove duplicates
            return [...new Set(words)];
        }

        // Highlight keywords in text
        function highlightText(text, query) {
            if (!text || !query) return text;
            
            const tokens = tokenize(query);
            if (tokens.length === 0) return text;
            
            // First, escape HTML to prevent XSS
            let escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            
            // Sort tokens by length (longer first) to prioritize longer matches
            const sortedTokens = tokens.filter(t => t.length > 0).sort((a, b) => b.length - a.length);
            
            // Find all match positions first (on escaped text)
            const allMatches = [];
            sortedTokens.forEach(token => {
                if (token.length > 0) {
                    const escapedToken = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const regex = new RegExp(escapedToken, 'gi');
                    let match;
                    
                    while ((match = regex.exec(escaped)) !== null) {
                        allMatches.push({
                            start: match.index,
                            end: match.index + match[0].length,
                            text: match[0]
                        });
                    }
                }
            });
            
            // Remove overlapping matches (keep longer ones)
            const nonOverlapping = [];
            allMatches.sort((a, b) => {
                if (a.start !== b.start) return a.start - b.start;
                return b.end - a.end; // Longer first if same start
            });
            
            allMatches.forEach(match => {
                const overlaps = nonOverlapping.some(existing => 
                    (match.start < existing.end && match.end > existing.start)
                );
                if (!overlaps) {
                    nonOverlapping.push(match);
                }
            });
            
            // Sort by start position descending for replacement
            nonOverlapping.sort((a, b) => b.start - a.start);
            
            // Replace from end to start
            let highlighted = escaped;
            nonOverlapping.forEach(match => {
                const before = highlighted.substring(0, match.start);
                const matchText = highlighted.substring(match.start, match.end);
                const after = highlighted.substring(match.end);
                highlighted = before + `<span class="highlight">${matchText}</span>` + after;
            });
            
            return highlighted;
        }

        // Create repo card HTML
        function createRepoCard(repo, query = '') {
            const highlightedReadme = highlightText(repo.readme || '', query);
            const highlightedFullName = highlightText(repo.fullName || '', query);
            const emojis = ['📦', '🚀', '⚛️', '🐍', '⚡', '🔧', '💻', '🎨'];
            const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
            
            return `
                <div class="repo-card" style="opacity: 0; animation: fadeInUp 0.7s ease-out forwards;">
                    <div class="repo-cover">
                        <div class="repo-cover-placeholder">${randomEmoji}</div>
                    </div>
                    <div class="repo-content">
                        <div class="repo-header">
                            <div class="repo-name">
                                <a href="${repo.htmlUrl}" target="_blank">${highlightedFullName}</a>
                            </div>
                            <div class="repo-full-name">${repo.fullName || ''}</div>
                        </div>
                        <div class="repo-description">
                            ${highlightedReadme || '<span style="color: rgba(56, 56, 56, 0.4);">暂无描述</span>'}
                        </div>
                        <div class="repo-actions">
                            <button class="btn-view" onclick="window.open('${repo.htmlUrl}', '_blank')">查看详情</button>
                            <button class="btn-favorite">收藏</button>
                        </div>
                    </div>
                </div>
            `;
        }
        
        // Display results for current page
        function displayResults() {
            const start = (currentPage - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const pageResults = allResults.slice(start, end);
            
            const container = document.getElementById('resultsContainer');
            container.innerHTML = '';
            
            pageResults.forEach((repo, index) => {
                const cardHtml = createRepoCard(repo, searchQuery);
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = cardHtml;
                const card = tempDiv.firstElementChild;
                card.style.animationDelay = `${index * 0.1}s`;
                container.appendChild(card);
            });
            
            // Re-initialize icons for new elements
            lucide.createIcons();
        }
        
        // Display featured repos
        function displayFeaturedRepos() {
            const featuredGrid = document.getElementById('featuredGrid');
            const featuredSection = document.getElementById('featuredSection');
            
            // Sample featured repos (you can replace with actual API call)
            const featuredRepos = [
                { fullName: 'vuejs/vue-next', htmlUrl: 'https://gitee.com/vuejs/vue-next', readme: 'Vue.js 3.0 的源代码仓库，包含完整的框架实现和核心功能。这是一个渐进式 JavaScript 框架，用于构建用户界面。' },
                { fullName: 'facebook/react', htmlUrl: 'https://gitee.com/facebook/react', readme: 'React 是一个用于构建用户界面的 JavaScript 库。它声明式、高效且灵活。' },
                { fullName: 'django/django', htmlUrl: 'https://gitee.com/django/django', readme: 'Django 是一个高级 Python Web 框架，鼓励快速开发和简洁实用的设计。' },
                { fullName: 'vitejs/vite', htmlUrl: 'https://gitee.com/vitejs/vite', readme: '下一代前端构建工具，提供极速的开发体验和优化的生产构建。' },
                { fullName: 'expressjs/express', htmlUrl: 'https://gitee.com/expressjs/express', readme: '快速、无偏见、极简的 Node.js Web 框架。' },
                { fullName: 'tiangolo/fastapi', htmlUrl: 'https://gitee.com/tiangolo/fastapi', readme: '现代、快速的 Web 框架，用于使用 Python 3.7+ 构建 API，基于标准 Python 类型提示。' }
            ];
            
            featuredGrid.innerHTML = '';
            featuredRepos.forEach((repo, index) => {
                const cardHtml = createRepoCard(repo);
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = cardHtml;
                const card = tempDiv.firstElementChild;
                card.style.animationDelay = `${index * 0.1}s`;
                featuredGrid.appendChild(card);
            });
            
            featuredSection.classList.remove('hidden');
            lucide.createIcons();
        }

        // Display pagination
        function displayPagination() {
            const totalPages = Math.ceil(allResults.length / itemsPerPage);
            if (totalPages <= 1) {
                document.getElementById('pagination').classList.add('hidden');
                return;
            }
            
            const pagination = document.getElementById('pagination');
            pagination.classList.remove('hidden');
            pagination.innerHTML = '';
            
            // Previous button
            const prevBtn = document.createElement('button');
            prevBtn.className = `page-btn ${currentPage === 1 ? 'opacity-30 cursor-not-allowed' : ''}`;
            prevBtn.style.cssText = 'background: white; border: 1px solid rgba(56, 56, 56, 0.1); padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; color: #383838;';
            prevBtn.innerHTML = '<i data-lucide="chevron-left" class="w-4 h-4"></i>';
            prevBtn.disabled = currentPage === 1;
            prevBtn.onclick = () => {
                if (currentPage > 1) {
                    currentPage--;
                    displayResults();
                    displayPagination();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            };
            pagination.appendChild(prevBtn);
            
            // Page numbers
            for (let i = 1; i <= totalPages; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
                pageBtn.style.cssText = i === currentPage 
                    ? 'background: #4a9eff; border: 1px solid #4a9eff; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; color: white;'
                    : 'background: white; border: 1px solid rgba(56, 56, 56, 0.1); padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; color: #383838;';
                pageBtn.textContent = i;
                pageBtn.onclick = () => {
                    currentPage = i;
                    displayResults();
                    displayPagination();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                };
                pagination.appendChild(pageBtn);
            }
            
            // Next button
            const nextBtn = document.createElement('button');
            nextBtn.className = `page-btn ${currentPage === totalPages ? 'opacity-30 cursor-not-allowed' : ''}`;
            nextBtn.style.cssText = 'background: white; border: 1px solid rgba(56, 56, 56, 0.1); padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; color: #383838;';
            nextBtn.innerHTML = '<i data-lucide="chevron-right" class="w-4 h-4"></i>';
            nextBtn.disabled = currentPage === totalPages;
            nextBtn.onclick = () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    displayResults();
                    displayPagination();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            };
            pagination.appendChild(nextBtn);
            
            lucide.createIcons();
        }

        // Event listeners
        document.getElementById('searchBtn').addEventListener('click', () => {
            const query = document.getElementById('searchInput').value;
            performSearch(query);
        });

        document.getElementById('searchInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                const query = document.getElementById('searchInput').value;
                performSearch(query);
            }
        });

        // Check for query parameter in URL
        const urlParams = new URLSearchParams(window.location.search);
        const queryParam = urlParams.get('q');
        if (queryParam) {
            document.getElementById('searchInput').value = queryParam;
            performSearch(queryParam);
        } else {
            // Show featured repos on initial page load
            displayFeaturedRepos();
        }
    </script>
</body>
</html>

